<template>
  <div class="workbench-top10list">
    <div class="workbench-top10list-content">
      <table class = "rank table">
        <tr v-for="item in 10">
          <td>{{item}}</td>
        </tr>
      </table>
      <div>
        <div  class="workbench-top10list-cdr top10list">
          <el-tooltip class="item" effect="dark" transition="" :content="$t('workbench.callAccess')" placement="right">
            <div class="icon-common icon iconfont icon-gongzuotaiwangguan top10list-cdr-icon">
              <i class="icon iconfont icon-dianhuahuru"></i>
            </div>
          </el-tooltip>
          <table class="table">
            <tr  v-for="(list,index) in currentData.cdrCallInTop10" :key="index">
              <td class="work_name">{{list.name}}</td><td>{{list.score}}</td>
            </tr>
          </table>
        </div>
        <div class="workbench-top10list-callout top10list" >
          <el-tooltip class="item" effect="dark" transition="" :content="$t('workbench.callAccessOut')" placement="right">
            <div class="icon-common icon iconfont icon-gongzuotaiwangguan top10list-callout-icon">
              <i class="icon iconfont icon-waihutubiao"></i>
            </div>
          </el-tooltip>
          <table class="table">
            <tr  v-for="(list,index) in currentData.cdrCallOutTop10" :key="index">
              <td class="work_name">{{list.name}}</td><td>{{list.score}}</td>
            </tr>
          </table>
        </div>
        <div class="workbench-top10list-mail top10list">
          <el-tooltip class="item" effect="dark" transition="" :content="$t('workbench.emailAccess')" placement="right">
            <div class="icon-common icon iconfont icon-gongzuotaiwangguan top10list-mail-icon">
              <i class="icon iconfont">&#xe650;</i>
            </div>
          </el-tooltip>
          <table class="table">
            <tr  v-for="(list,index) in currentData.mailTop10" :key="index">
              <td  class="work_name">{{list.name}}</td><td>{{list.score}}</td>
            </tr>
          </table>
        </div>
        <div class="workbench-top10list-im top10list">
          <el-tooltip class="item" effect="dark" transition="" :content="$t('workbench.webChatAccess')" placement="right">
            <div class="icon-common icon iconfont icon-gongzuotaiwangguan top10list-im-icon">
              <i class="icon iconfont">&#xe655;</i>
            </div>
          </el-tooltip>
          <table class="table">
            <tr  v-for="(list,index) in currentData.imTop10" :key="index">
              <td class="work_name">{{list.name}}</td><td>{{list.score}}</td>
            </tr>
          </table>
        </div>
        <div class="workbench-top10list-bus top10list">
          <el-tooltip class="item" effect="dark" transition="" :content="$t('workbench.businessSum')" placement="right">
            <div class="icon-common icon iconfont icon-gongzuotaiwangguan top10list-bus-icon">
              <i class="icon iconfont">&#xe63d;</i>
            </div>
          </el-tooltip>
          <table class="table">
            <tr  v-for="(list,index) in currentData.businessTop10" :key="index">
              <td  class="work_name">{{list.name}}</td><td>{{list.score}}</td>
            </tr>
          </table>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  //    import Workbench from './components/workbench/workbench.vue'
  export default {
    name: 'monitor10list',
    props: {
    },
    data () {
      return {
        top10: {
          businessTop10: [],
          cdrCallInTop10: [],
          cdrCallOutTop10: [],
          imTop10: [],
          mailTop10: []
        },
        timer: ''
      }
    },
    computed: {
      currentData () {
        let item = this.top10
        for (let n in item) {
          let length = item[n].length
          for (let m = 0; m < 10 - length; m++) {
            item[n].push({name: '- -', score: '- -'})
          }
        }
        return item
      }
    },
    methods: {
      fetchData () {
        this.$store.dispatch('queryMonitorAgentTopData').then((response) => {
          this.top10 = response || {}
        })
      }
    },
    beforeMount () {
      // 监控座席或超级管理员
      let type = this.$store.state.session.user.type
      if (type === 'manager' || type === 'admin') {
        this.fetchData()
        this.timer = window.setInterval(() => {
          // 只有在监控模块下才发请求
          if (this.$route.path.split('/')[2] === 'monitor') {
            this.fetchData()
          }
        }, 60000)
      }
    }
  }
</script>
<style scoped lang="stylus">
  @import '../../../assets/common.styl';
  table
    border-spacing 0
    border-collapse collapse
    background-color transparent
  .table
    border-collapse collapse
    width 100%
    max-width 100%
    margin-bottom 20px
  .table td
  .table th
    background-color $cf-white !important
  .table > thead > tr > th
  .table > tbody > tr > th
  .table > tfoot > tr > th
  .table > thead > tr > td
  .table > tbody > tr > td
  .table > tfoot > tr > td
    padding 8px
    line-height 1.42857143
    vertical-align top
    border-top 1px solid #ddd
  .table > thead > tr > th
    vertical-align bottom
    border-bottom 2px solid #ddd
  .table > caption + thead > tr:first-child > th
  .table > colgroup + thead > tr:first-child > th
  .table > thead:first-child > tr:first-child > th
  .table > caption + thead > tr:first-child > td
  .table > colgroup + thead > tr:first-child > td
  .table > thead:first-child > tr:first-child > td
    border-top 0
  .table > tbody + tbody
    border-top 2px solid #ddd
  .table .table
    background-color $cf-white
  .workbench-top10list
    margin  5px
    border  1px solid #e7e7eb
    height  330px
    background  $cf-white
    .workbench-title
      position  relative
      color $cf-gray2
      .top-choose
        position  absolute
        right  40px
        top  0
        span
          display  block
          float  left
          margin-left  10px
          min-width  28px
          height  40px
          cursor pointer
  .top10list
    width 20%
    float left
    box-sizing border-box
  .workbench-top10list-content
    font-size  12px
    position  relative
    height  100%
    padding  0 30px 0 70px
    .table
      table-layout fixed
      & last-of-type
         border-bottom none
      tr
        height  19px
        line-height  19px
        border-bottom  1px dashed $c-border1
        text-align  center
        color $cf-gray3
        & last-of-type
           border-bottom none
        .work_name
          overflow hidden
          width 100px
          text-overflow ellipsis
          white-space nowrap
  .rank
    position  absolute
    left  48px
    top  120px
    width  22px
    p
      height  19px
      border-bottom  1px dashed $c-border1
      color  #989898
      padding  0
      margin  0
      text-align  center

  div.icon-common
    width 96px
    height  96px
    line-height 96px
    font-size 96px
    text-align center
    margin  12px 0 12px 2px
    position relative
    i
      display inline-block
      font-size 30px
      position absolute
      top 23px
      left 33px
      color white
  .workbench-top10list-cdr .top10list-cdr-icon
    color #65c3df
  .workbench-top10list-callout .top10list-callout-icon
    color $c-main
  .workbench-top10list-mail .top10list-mail-icon
    color #d498e9
  .workbench-top10list-im .top10list-im-icon
    color #f8cb00
  .workbench-top10list-bus .top10list-bus-icon
    color #7bcdd2
  .workbench-top10list-im .table tr:nth-child(-n+3)
    color #f8cb00
  .workbench-top10list-mail .table tr:nth-child(-n+3)
    color #c35de8
  .workbench-top10list-cdr .table tr:nth-child(-n+3)
    color #65c3df
  .workbench-top10list-callout .table tr:nth-child(-n+3)
    color $c-main
  .workbench-top10list-bus .table tr:nth-child(-n+3)
    color #00c7d1
</style>
